<template>

	<view class="container">
		<view class="content"></view>
		<view class="content-box">
			<view class="score">
				<view class="score-title">我的积分</view>
				<view class="score-num">
					<text class="test">总积分</text>
					<text class="spar">{{ userInfo.integral }}</text>
				</view>
			</view>
		</view>
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ 'active': currentTab === index }"
				@click="switchTab(index)">
				{{ tab.name }}
				<view v-if="currentTab === index" class="tab-underline"></view>
			</view>
		</view>
		<view  v-if="currentTab === 0">
			<view class="item global-shadow-2" v-for="(item, index) in info" :key="index">
				<image class="left thumb" :src="item.assetRecordUserHeadimg"></image>
				<view class="body">
					<view class="name">{{ item.assetRecordUserName }}</view>
					<view class="time" v-if="item.activiteType != 0">
						{{ item.orderUserName }} 购买于 {{ $tool.formatDate(item.updatedAt, 'MM-dd hh:mm') }}
					</view>
					<view class="time" v-else>
						{{ item.orderUserName }} 邀请于 {{ $tool.formatDate(item.updatedAt, 'MM-dd hh:mm') }}
					</view>
				</view>
				<view class="global-item">
					<view class="right" v-if="item.zhenbeiCoin">
						<span class="plus">+</span>
						<span class="number" v-if="item.zhenbeiCoin">{{ item.zhenbeiCoin }}积分</span>
					</view>
					<view class="CoinRatio" v-if="item.zhenbeiCoinRatio">
						<span>积分率{{ item.zhenbeiCoinRatio }}</span>
					</view>
				</view>
				<view class="status" :class="'status-' + item.activiteType">
					{{ item.activiteTypeName }}
				</view>
			</view>







			<!-- <view class="title">
				<text>积分明细：</text>
			</view> -->

			<!-- <view class="list">
				<view class="list-item" v-for="item in list" :key="item.uuid">
					<view class="list-body">
						<view class="action">
							{{ item.description }}
						</view>
						<view class="date-time">
							{{ item.createdAt }}
						</view>
					</view>
					<view class="right">
						<text class="red" v-if="item.type">+{{ item.value }}</text>
						<text class="gray" v-else>-{{ item.value }}</text>
					</view>
				</view>
			</view> -->
		</view>
		<view class="item" v-if="currentTab === 1">
			<rich-text :nodes="html"></rich-text>
		</view>
		<view v-if="!list.length && init" style="height: 60vh;overflow: hidden;">
			<NoData></NoData>
		</view>
	</view>
</template>

<script>
import {
	getScoreRecord
} from "../../../api/user";
import {
	mapGetters
} from "vuex"
export default {
	components: {},
	data() {
		return {
			list: [],
			total: 0,
			page: 1,
			per_page: 20,
			init: false,
			loading: false,
			currentTab: 0, // 默认选中第一个Tab
			tabs: [{
				name: '积分明细',
			},
			//  {
			// 	name: "晶石说明",
			// }
		],
			activeIndex: 0, //提现选择的下标
			// 选择的晶石数量
			number: null,
			// 自定义数量
			custom: null,
			html: ``,
		}
	},
	props: {
		info: {
			type: Array
		}
	},
	computed: {
		...mapGetters(["userInfo"]),
		setting() {
			return this.$store.getters.setting.score || {};
		},
		isBuyEnabled() {
			return this.setting.is_buy_enabled;
		},
		sku() {
			return this.info || []
		}
	},
	async onLoad() {
		console.log(this.info);
		
		this.$store.dispatch("getUserInfo");
		// uni.showLoading({
		// 	title: "加载中",
		// });
		// const res = await this.getScoreRecord();
		// uni.hideLoading();
		// this.init = true;
		// this.list.push(...res.data.records);
		// this.total = res.data.item_total;
		// this.selectById();
		uni.setNavigationBarTitle({
			title: "我的积分",
		});
	},
	onShow() {
		this.$store.dispatch("getUserInfo")
	},
	async onReachBottom() {
		// if (this.loading) return;
		// this.loading = true;
		// this.page++;
		// const res = await this.getScoreRecord();
		// this.loading = false;
		// this.list.push(...res.data.list);
	},
	methods: {
		// 切换tab
		switchTab(index) {
			this.currentTab = index;
		},
		// async getScoreRecord() {
		// 	return await getScoreRecord({
		// 		page_num: this.page,
		// 		per_page: this.per_page,
		// 	});
		// },
	},
	filters: {}
}
</script>
<style lang="scss" scoped>
.container {
	// height: 100vh;
	// overflow-y: auto;
}

.content {
	background: url(../../../static/bgColor.png) center/ cover no-repeat;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.footer {
	// display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	// background-color: #f5f5f5;

	.footer-button {
		margin: 0 auto;
		margin-bottom: 10rpx;
		width: 600rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 80rpx;
		color: rgb(240, 206, 173);
		border: 3rpx solid rgb(240, 206, 173);
		background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
		// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
		// color: #6c2a09;
		font-size: 35rpx;

	}
}

.content-box {
	width: 90%;
	margin: 30rpx auto;
	height: 440upx;
	position: relative;
	color: #fff;
	background: url(../../../static/scoreBg.png) center/ cover no-repeat;

	.user-headimg {
		width: 86upx;
		height: 86upx;
		border-radius: 50%;
	}

	.score {
		font-size: 30rpx;
		color: #fff;
		margin-top: 16upx;
		width: 90%;
		height: 300rpx;
		position: absolute;
		top: 15%;
		left: 10%;

		.score-title {
			font-size: 45rpx;
			color: #fff;
			font-weight: 600;
		}

		.score-num {
			margin-top: 100rpx;
			font-size: 35rpx;
			color: #fff;

			.test {
				margin-right: 10rpx;
			}

			.spar {
				font-size: 40rpx;
			}
		}

		.spar-btn {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			position: absolute;
			right: 10%;
			bottom: 5%;
			background: url("../../../static/peopleBar.png") no-repeat center;
			font-size: 30rpx;
			color: #fff;
			border-radius: 20rpx;
			backdrop-filter: blur(15px);
		}
	}
}

.tab-bar {
	width: 100%;
	display: flex;
	align-items: center;
	color: #fff;
	justify-content: center;
}

.tab-underline {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120rpx;
	height: 4rpx;
	background-color: #6a0dad;
}

.tab-item {
	position: relative;
	padding: 20rpx 80rpx;
	cursor: pointer;
}

.tab-item.active {
	font-weight: bold;
	font-size: 35rpx;
}


.action {
	font-weight: 100;
	color: #fff;
	font-size: 35rpx;
}

.red {
	background: linear-gradient(70deg, rgb(108, 67, 255), rgb(133, 94, 231));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gray {
	background: linear-gradient(70deg, #ed2346, #fe6948);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.red,
.gray {
	font-weight: 500;
}

.title {
	margin: 0 30rpx;
	height: 100upx;
	line-height: 70upx;
	font-size: 35upx;
	font-weight: 100;
	position: relative;
	display: flex;
	align-items: center;
	color: #fff;
	// &:after {
	//   content: "";
	//   position: absolute;
	//   left: 0rpx;
	//   width: 3px;
	//   height: 40upx;
	// 	background: linear-gradient(70deg, #ed2346, #fe6948);
	// }
}

.item {
	border-radius: 50rpx;
	background-color: rgb(31, 29, 41);
	margin: 20rpx auto;
	width: 90%;
	overflow-y: auto;
	color: white;
	font-size: 33rpx;
	padding: 30rpx;

	// border: 1rpx solid #5d4748;
	.item-content {
		margin: 50rpx;

	}
}

.list {
	margin: 0 24rpx;
	border-radius: 20rpx;
	overflow-y: auto;
}

.list-item {
	display: flex;
	padding: 24rpx 15rpx;
	box-sizing: border-box;
	border-bottom: 3rpx solid rgb(128, 129, 136);

	.order-number {
		font-size: 26rpx;
		margin-top: 6rpx;
	}

	.date-time {
		font-size: 24upx;
		margin-top: 10upx;
		color: rgb(128, 129, 136);
	}
}

.list-body {
	flex: 1;
}

.right {
	font-size: 40upx;
}


.popup_content {
	background-color: #fff;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	text-align: center;
	padding-bottom: 40rpx;

	.popup_top {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: none;

		i {
			display: inline-block;
			width: 50rpx;
			height: 10rpx;
			background-color: #a5a5a6;
			border-radius: 20rpx;
		}
	}

	.popup_title {
		padding-top: 40rpx;
		color: #6c43ff;
		font-size: 32rpx;
		padding-bottom: 40rpx;
	}

	.economy_name {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.economy_value {
		font-size: 36rpx;
		font-weight: bold;
	}

	.deposit {
		text-align: left;
		font-size: 28rpx;
		padding: 0 60rpx;
	}

	.depositList {
		padding: 0 60rpx;
		text-align: left;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;

		.el-tag {
			display: inline-block;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 36rpx;
			border: 2rpx solid #858585;
			color: #858585;
			border-radius: 10rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			font-size: 32rpx;
		}

		.active {
			color: #6c43ff;
			border-color: #6c43ff;
		}

		.uni-input {
			width: 310rpx;
			border: 2rpx solid #858585;
			height: 60rpx;
			border-radius: 8rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}

	.conversion {
		margin-top: 16rpx;
		margin-bottom: 30rpx;
	}

	.foot_btn_group {
		padding: 0 60rpx;

		.btn_group {
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
			background-image: url(../../../static/foot-btn-group-bg.png);
			background-size: 100%;
			background-repeat: no-repeat;

			span {
				flex: 1;
				display: inline-block;
			}
		}

	}
}

.item {
	display: flex;
	padding: 10px;
	margin: 20rpx 30rpx;
	background: url(../../../static/boxCard.png) center/ cover no-repeat;
	border: 2rpx solid rgb(108, 67, 255);
	border-radius: 15rpx;
	align-items: center;
	position: relative;
	height: 120rpx;

	.left {
		width: 100rpx;
		height: 100rpx;
		flex: 0 0 100rpx;
		border-radius: 10%;
		margin-right: 18rpx;
	}

	.body {
		flex-grow: 1;
		display: flex;
		height: 100rpx;
		flex-direction: column;
		justify-content: space-between;

		.name {
			font-weight: 700;
			color: #fff;
		}

		.time {
			color: gray;
			font-size: 26rpx;
			color: #fff;
		}
	}

	.global-item {
		.right {
			width: 230rpx;

			.plus {
				color: #59fd15;
			}

			.number {
				color: #59fd15;
				font-size: 32rpx;
			}
		}

		.CoinRatio {
			color: #fff;
		}
	}

	.status {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		border-radius: 20rpx;
		color: white;
		font-weight: 500;
		background: #bbb;
		padding: 2rpx 10rpx;
		font-size: 20rpx;

		&.status-0 {
			background: #bbb;
		}

		&.status-2 {
			background: #00B26A;
		}

		&.status-1 {
			background: #F27233;
		}
	}
}
</style>